<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>网上预约清洁服务系统</title>
    <style>
        body {
            margin: 0;
            font-family: Arial, sans-serif;
            height: 100%;
        }

        .container {
            display: flex;
            flex-direction: column;
            min-height: 100vh; /* 视口高度 */
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            background-image: url("/images/index-background.png");
            background-size: cover;
            background-repeat: no-repeat;
        }

        .navbar {
            background-color: black;
            display: flex;
            justify-content: space-between;
            /*padding: 10px 20px;*/
        }

        .navbar a {
            color: white;
            text-decoration: none;
            margin-left: 20px;
            font-size: 20px;
            text-align: center;
            width: 20%;
        }

        .content {
            flex: 1; /* 占据剩余空间 */
        }

        .search-form {
            margin-left: 35%;
            margin-top: 80px;
            margin-bottom: 50px;
        }

        .search-form > input:first-of-type {
            height: 40px;
            width: 400px;
            font-size: 30px;
        }

        .search-form > input:nth-of-type(2) {
            font-size: 25px;
        }

        .rating-css {
            background-image: url("/images/card-2.png");
            background-repeat: no-repeat;
            background-size: cover;
            width: 600px;
            height: auto;
            margin-left: 30%;
        }

        .service-detail {
            margin-left: 30%;
        }

        .footer {
            background-color: #333;
            color: white;
            text-align: center;
            padding: 10px 20px;
            width: 100%;
        }

        .service {
            display: flex;
            flex-wrap: wrap;
            width: 80%;
            margin-left: 15%;
            margin-right: 10%;
        }

        .service-card {
            align-items: center;
            flex: 0 0 25%; /* 这将使得每个item占据容器宽度的25%，即一行中最多4个 */
            box-sizing: border-box; /* 确保padding和border不会增加元素的宽度 */
            padding: 10px; /* 可选，用于增加div之间的间距 */
            margin: 10px;
        }

        .service-card:hover {
            border: 2px solid #cccccc;
        }

        .img-card {
            width: 300px;
            height: auto;
        }

        .service-card h2 {
            margin: 10px 0;
        }

        .service-card a {
            text-decoration: none;
            color: black;
        }

        .service-card a:hover {
            text-decoration: none;
            color: blue;
        }

        .service-card a:active {
            text-decoration: none;
            color: blue;
        }

        .service-card p {
            margin: 10px 0;
        }

        .back {
            text-decoration: none;
            color: black;
        }

        .displayNone {
            display: none;
        }

        .myAppointment {
            text-align: center;
        }

        h1 {
            margin-top: 50px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="content">
        <nav class="navbar">
            <a th:href="@{/index}">智约清洁</a>
            <a th:href="@{/index}" id="navigationIndexLink">首页</a>
            <th:block th:if="${choice == 0}">
                <script>
                    var navigationIndexLink = document.getElementById("navigationIndexLink");
                    navigationIndexLink.style.backgroundColor = "gray"
                </script>
            </th:block>
            <a th:href="@{/service-center}" id="navigationServiceCenterLink">预约清洁服务中心</a>
            <th:block th:if="${choice == 1 || choice == 2}">
                <script>
                    var navigationServiceCenterLink = document.getElementById("navigationServiceCenterLink");
                    navigationServiceCenterLink.style.backgroundColor = "gray"
                </script>
            </th:block>
            <a th:href="@{/myAppointment}" id="navigationMyAppointmentLink">我的预约订单</a>
            <th:block th:if="${choice == 3}">
                <script>
                    var navigationMyAppointmentLink = document.getElementById("navigationMyAppointmentLink");
                    navigationMyAppointmentLink.style.backgroundColor = "gray"
                </script>
            </th:block>
            <a th:if="${myInfo}" th:href="@{/myInfo}" style="background-color: gray">个人信息</a>
            <a th:if="${myInfo != 1}" th:href="@{/myInfo}">个人信息</a>
            <a th:if="${session != null && session.user != null}" th:href="@{/quit}" id="quit">退出</a>
        </nav>

        <th:block th:if="${choice == 0}">
            <div style="text-align: center">
                <h1>Hello <span th:text="${session.user.getUsername()}"></span>,欢迎您来到网上预约清洁服务系统</h1>
                <h3>Welcome to the online appointment system for cleaning services.</h3>
                <h2>本系统致力于提供各种优质的清洁服务</h2>
                <h4>This system is committed to providing various high-quality cleaning services</h4>
                <p><a th:href="@{/service-center}">
                    <button type="button" style="font-size: 20px;margin-top: 30px;">前往预约清洁服务中心</button>
                </a></p>
            </div>
        </th:block>

        <th:block th:if="${choice == 1}">
            <form th:action="@{/search}" method="post" class="search-form">
                <input type="text" name="keyword"/>
                <input type="submit" value="搜索"/>
            </form>
            <div class="service">
                <div th:each="serve:${serveList}" class="service-card">
                    <a th:href="@{'/service-detail?id='+${serve.getId()}+'&editId=0'}">
                        <img src="/images/card-1.png" alt="加载中......" class="img-card">
                        <h2 th:text="${serve.getName()}"></h2>
                        <!--                        <p th:text="${serve.getDescription()}"></p>-->
                    </a>
                </div>
            </div>
        </th:block>

        <th:block th:if="${choice == 2}">
            <div th:if="${appointment == 0}">
                <div class="service-detail">
                    <h2 th:text="${serve.getName()}"></h2>
                    <p>服务描述：<span th:text="${serve.getDescription()}"></span></p>
                    <p>价格：<span th:text="${serve.getPrice()}"></span>元</p>
                    <p>
                        <button><a th:href="@{'/toAppointment?serviceId='+${serve.getId()}}" class="back">预约</a>
                        </button>
                        <a th:href="@{/service-center}"><button type="button">返回</button></a>
                    </p>
                </div>
                <hr>
                <div>
                    <p class="service-detail">服务评价：</p>
                    <h3 th:if="${ratingList.isEmpty()}" style="text-align: center">该清洁服务暂无评价！</h3>
                    <div th:each="rating,ratingStat:${ratingList}" class="rating-css">
                        <p>用户：<span th:text="${userList.get(ratingStat.index).getUsername()}"></span></p>
                        <span th:if="${afterEditRating == 1 && editId == rating.getId()}" id="afterEditRating">
                            <script>
                                window.onload = function () {
                                    document.getElementById('afterEditRating').scrollIntoView({
                                        behavior: "auto",
                                        block: "center"
                                    });
                                };
                            </script>
                        </span>
                        <p th:if="${rating.getId() != editId || rating.getId() == editId && afterEditRating == 1}">评分：<span
                                th:text="${rating.getScore()}"></span></p>
                        <p th:if="${rating.getId() != editId || rating.getId() == editId && afterEditRating == 1}">用户反馈：<span
                                th:text="${rating.getFeedback()}"></span></p>
                        <form th:if="${rating.getId() == editId && afterEditRating == 0}" th:action="@{/userEditRating}"
                              method="post">
                            <p id="score">请选择评分（0-5，5表示最高评分）：
                                <select name="score">
                                    <option th:if="${rating.getScore()} == 0" value="0" selected>0</option>
                                    <option th:if="${rating.getScore()} == 1" value="1" selected>1</option>
                                    <option th:if="${rating.getScore()} == 2" value="2" selected>2</option>
                                    <option th:if="${rating.getScore()} == 3" value="3" selected>3</option>
                                    <option th:if="${rating.getScore()} == 4" value="4" selected>4</option>
                                    <option th:if="${rating.getScore()} == 5" value="5" selected>5</option>
                                    <option th:if="${rating.getScore()} != 0" value="0">0</option>
                                    <option th:if="${rating.getScore()} != 1" value="1">1</option>
                                    <option th:if="${rating.getScore()} != 2" value="2">2</option>
                                    <option th:if="${rating.getScore()} != 3" value="3">3</option>
                                    <option th:if="${rating.getScore()} != 4" value="4">4</option>
                                    <option th:if="${rating.getScore()} != 5" value="5">5</option>
                                </select>
                            </p>
                            <p>用户反馈：</p>
                            <p><textarea name="feedback" th:text="${rating.getFeedback()}" required/></p>
                            <input type="hidden" name="id" th:value="${rating.getId()}"/>
                            <p>
                                <input type="submit" value="确认编辑"/>
                                <button><a href="javascript:void(0);" onclick="history.back()"
                                           class="back">取消编辑</a></button>
                            </p>
                            <script>
                                window.onload = function () {
                                    document.getElementById('score').scrollIntoView({
                                        behavior: "auto",
                                        block: "center"
                                    });
                                };
                            </script>
                        </form>
                        <p th:if="${rating.getId() != editId || rating.getId() == editId && afterEditRating == 1}">
                            评价创建时间：<span
                                th:text="${rating.getCreatedTime()}"></span></p>
                        <p th:if="${rating.getId() != editId || rating.getId() == editId && afterEditRating == 1}">
                            最后更新时间：
                            <span th:text="${rating.getLastUpdatedTime()}"></span></p>
                        <p th:if="${session.user.getUsername() == userList.get(ratingStat.index).getUsername()}">
                            <a th:href="@{'/service-detail?id='+${rating.getServiceId()}+'&editId='+${rating.getId()}}">
                                <button type="button">编辑</button></a>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <a th:href="@{'/deleteRating?id='+${rating.getId()}}"><button type="button">删除</button></a>
                        </p>
                    </div>
                </div>
            </div>
            <div th:if="${appointment == 1}">
                <form th:action="@{/addAppointment}" method="post" style="margin-left: 40%">
                    <h2>预约信息填写</h2>
                    <p>清洁服务：<span th:text="${service.getName()}"></span></p>
                    <p>预约时间：<input type="datetime-local" name="appointmentTime" required/></p>
                    <p>预约地点：<input type="text" name="appointmentLocation" required/></p>
                    <p>联系电话：<input type="tel" name="phone" pattern="^1[3-9]\d{9}$" title="请输入11位手机号码"
                                       required/></p>
                    <p>
                        <input type="submit" value="预约"/>
                        <a href="javascript:void(0)" onclick="history.back()" class="back"><button type="button">取消预约</button></a>
                    </p>
                    <input type="hidden" name="serviceId" th:value="${service.getId()}"/>
                    <input type="hidden" name="userId" th:value="${session.user.getId()}"/>
                </form>
            </div>
        </th:block>
        <th:block th:if="${choice == 3}">
            <h1 th:if="${appointmentList.isEmpty()}" style="text-align: center">Hello <span th:text="${session.user.getUsername()}"></span>,到目前为止，您还没有预约订单
            </h1>
            <div class="myAppointment" style="font-size: 20px">
                <div th:each="appointment1,appointmentStat:${appointmentList}">
                    <p>预约服务：<span th:text="${serveList.get(appointmentStat.index).getName()}"></span></p>
                    <p>预约创建时间：<span th:text="${appointment1.getCreatedTime()}"></span>
                        预约最后更新时间：<span th:text="${appointment1.getLastUpdatedTime()}"></span></p>
                    <p>预约时间：<span th:text="${appointment1.getAppointmentTime()}"></span></p>
                    <p>预约地点：<span th:text="${appointment1.getAppointmentLocation()}"></span></p>
                    <p>联系电话：<span th:text="${appointment1.getPhone()}"></span></p>
                    <p>订单状态：<span th:text="${appointment1.getStatus()}"></span></p>
                    <p th:if="${appointment1.getStatus() == '已完成'}">
                        <a style="color: blue;text-decoration: none" th:href="@{'/isAddRating?appointmentId='+${appointment1.getId()}
                        +'&userId='+${appointment1.getUserId()}+'&serviceId='+${appointment1.getServiceId()}}">订单已完成-前往评价(已评价的话，请忽略！)</a>
                    </p>
                    <hr>
                </div>
            </div>
        </th:block>
        <th:block th:if="${choice == 4}">
            <form th:action="@{/addRating}" method="post" style="margin-left: 40%">
                <input type="hidden" name="appointmentId" th:value="${appointmentId}"/>
                <input type="hidden" name="userId" th:value="${userId}"/>
                <input type="hidden" name="serviceId" th:value="${serviceId}"/>
                <h2>评价</h2>
                <p>请选择评分（0-5，5表示最高评分）：
                    <select name="score">
                        <option value="0">0</option>
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5" selected>5</option>
                    </select>
                </p>
                <p>用户反馈：</p>
                <p><textarea cols="30" rows="5" name="feedback" required style="font-size: 20px"></textarea></p>
                <p><input type="submit" value="提交评价" style="margin-left: 13%"/></p>
            </form>
        </th:block>
        <th:block th:if="${myInfo}">
            <div style="text-align: center;font-size: 30px;"  >
                <h1>个人信息</h1>
                <p>用户名：<span th:text="${session.user.getUsername()}"></span></p>
                <form th:action="@{/editPassword}" method="post">
                    <p>密码：
                        <span th:text="${session.user.getPassword()}" id="password"></span>
                        <input type="text" name="password" id="editPassword"
                               th:value="${session.user.getPassword()}" style="font-size: 30px" required/>
                        <input type="submit" id="yesEditPasswordLink" style="font-size: 20px" value="确认编辑"/>
                        <a href="javascipt:void(0)" id="isEditPasswordLink">
                            <button type="button" style="font-size: 20px">编辑</button>
                        </a>
                        <input type="hidden" name="id" th:value="${session.user.getId()}">
                        <input type="hidden" name="username" th:value="${session.user.getUsername()}">
                        <input type="hidden" name="authority" th:value="${session.user.getAuthority()}">
                    </p>
                </form>
            </div>

            <script>
                var password = document.getElementById('password');
                var editPassword = document.getElementById('editPassword');
                var yesEditPasswordLink = document.getElementById('yesEditPasswordLink');
                var isEditPasswordLink = document.getElementById('isEditPasswordLink');

                editPassword.classList.add('displayNone');
                yesEditPasswordLink.classList.add('displayNone');

                isEditPasswordLink.onclick = function (event) {
                    event.preventDefault();
                    password.classList.add('displayNone');
                    editPassword.classList.remove('displayNone');
                    isEditPasswordLink.classList.add('displayNone');
                    yesEditPasswordLink.classList.remove('displayNone');
                }

            </script>
        </th:block>
    </div>
    <div class="footer">
        &copy; 2024 wjx. All rights reserved.
    </div>
</div>
<!--<script>-->
<!--    // Select the navigation links-->
<!--    const navbarLinks = document.querySelectorAll('.navbar a');-->
<!--    // Add event listener to the navigation links-->
<!--    navbarLinks.forEach(link => {-->
<!--        link.addEventListener('click', () => {-->
<!--            // Send an AJAX request to the server-->
<!--            fetch('/api/content')-->
<!--                .then(response => response.json())-->
<!--                .then(data => {-->
<!--                    // Update the content of the middle section with the response data-->
<!--                    // document.querySelector('.content').innerHTML = data.content;-->
<!--                    // document.querySelector('.content').innerHTML = '';-->
<!--                    data.forEach(item => {-->
<!--                        const div = document.createElement('div');-->
<!--                        div.textContent = item.content;-->
<!--                        document.querySelector('.content').appendChild(div);-->
<!--                    });-->
<!--                });-->
<!--        });-->
<!--    });-->
<!--</script>-->
</body>
</html>
